<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>充值记录</title>
    <link rel="stylesheet" href="/static/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/assets/module/admin.css?v=312" />
    <style>
        .layui-form-item {
            margin-bottom: 25px;
        }

        label .layui-icon {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>

<body>

    <!-- 加载动画 -->
    <div class="page-loading">
        <div class="ball-loader">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>

    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label w-auto">搜索用户：</label>
                            <div class="layui-input-inline mr0">
                                <input name="keyword" class="layui-input" type="text" placeholder="输入用户账号" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn" lay-filter="formSubSearchTbBas" lay-submit>
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </div>

                <table class="layui-table" id="tableTbBas" lay-filter="tableTbBas"></table>
            </div>
        </div>
    </div>
    <!-- js部分 -->
    <script type="text/javascript" src="/static/assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="/static/assets/js/common.js?v=312"></script>
    <script>
        layui.use(['layer', 'jquery', 'table', 'dropdown', 'form'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var table = layui.table;
            var dropdown = layui.dropdown;
            var form = layui.form;
            // 渲染表格
            var insTb = table.render({
                elem: '#tableTbBas',
                url: "{:url('admin/invite/index',['type'=>'get'])}",
                page: true,
                cols: [[
                    { field: 'Id', align: 'center', sort: true, title: 'ID', width: 90 },
                    { field: 'username', align: 'center', title: '用户账号', width: 150 },
                    { field: 'pay_order', align: 'center', title: '订单号', width: 280 },
                    { field: 'time', align: 'center', title: '充值时间' },
                    { field: 'invite', align: 'center', title: '类型' ,width:120,templet:function(d){
                        if(d.type == 1){
                            return '<span class="text-primary">微信Pay</span>'
                        }
                        if(d.type == 2){
                            return '<span class="text-primary">支付宝</span>'
                        }
                        if(d.type == 3){
                            return '<span class="text-primary">后台充值</span>'
                        }
                        }},
                    { field: 'balance', align: 'center', title: '充值积分',templet:function(d){
                        return '<span>'+d.balance+' 积分</span>'
                        } },
                    { field: 'state', align: 'center', title: '状态',width:120,templet:function(d){
                        if(d.state == 0){
                            return '<span style="color:red;">未支付</span>';
                        }else if(d.state == 1){
                            return '<span style="color:green;">已支付</span>';
                        }
                    }},
                ]]
            });

            // 搜索按钮点击事件
            form.on('submit(formSubSearchTbBas)', function (data) {
                insTb.reload({ where: data.field }, 'data');
            });

        });
    </script>
</body>

</html>